<ng-template #content let-offcanvas>
	<div class="offcanvas-header">
		<h4 class="offcanvas-title" id="offcanvas-basic-title">Profile update</h4>
		<button type="button" class="btn-close" aria-label="Close" (click)="offcanvas.dismiss('Cross click')"></button>
	</div>
	<div class="offcanvas-body">
		<form>
			<div class="mb-3">
				<label for="dateOfBirth">Date of birth</label>
				<div class="input-group">
					<input
						id="dateOfBirth"
						class="form-control"
						placeholder="yyyy-mm-dd"
						name="dp"
						ngbDatepicker
						#dp="ngbDatepicker"
					/>
					<button class="btn btn-outline-secondary bi bi-calendar3" (click)="dp.toggle()" type="button"></button>
				</div>
			</div>
		</form>
		<div class="text-end">
			<button type="button" class="btn btn-outline-secondary" (click)="offcanvas.close('Save click')">Save</button>
		</div>
	</div>
</ng-template>

<button class="btn btn-lg btn-outline-primary" (click)="open(content)">Launch demo offcanvas</button>

<hr />

<pre>{{ closeResult() }}</pre>
